<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <button id="btn">判断</button>
    <script>
        /* 
        isNaN方法：
        判断一个值 是否是NaN 如果是则返回true  如果不是则返回false
        无论传入的是什么类型，都会先被转为number类型，然后进行判断
         */
        var a = NaN;
        var b ='a1234';
        console.log(isNaN(a));
        console.log(isNaN(b));/* true */
        /* 
        效果，需求
            当用户点击按钮的时候，判断用户输入的内容是否是纯数字，如果是，则弹出请出现输入
            1.获取元素
            2.给元素绑定了点击事件，然后赋值一个函数，当事件发生改变的时候，函数就会执行
            3.获取输入框的内容，输入框元素的value属性就是代表输入框内容
            4.用isNaN判断是否为纯数字
            */
            
            /* 1.获取元素 */
            var oIpt = document.getElementById("ipt");
            var oBtn = document.getElementById("btn");
            console.log(oIpt,oBtn)

            /* 2.给元素绑定了点击事件，然后赋值一个函数，当事件发生改变的时候，函数就会执行 */
            oBtn.onclick = function () {
                /* 3.获取输入框的内容，输入框元素的value属性就是代表输入框内容 */
                console.log(oIpt.value);
                var userCon = oIpt.value;/* 因为我们要使用这个值所以要用变量接收 */

                /* 4.判断：虽然输入内容是字符串，但是isNaN会自动转换为number */
                if (isNaN(userCon)){
                    /* 如果输入内容不是纯数字，则转换为number的时候换为NaN,此时NaN检测会返回true */
                    alert("请重新输入 包含了非数字字符");
                    /* 清空输入框 */
                    oIpt.value = "";
                } else{
                    /* if中语句返回false会自动执行else后的代码 */
                    alert("欢饮登入")
                }

            }
    </script>
</body>
</html>